<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS登录</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="common.css">
    <style>
        .content {
            height: 660px;
            /* background: #1d6dc4; */
        }
        
        .content-con {
            /* height: 1472px; */
            background: #fff;
            margin: 0 auto;
            width: 87%;
            padding: 39px 0 50px 74px;
            box-sizing: border-box;
        }
        
        .contentL {
            height: 558px;
            /* background: cadetblue; */
            border-right: 1px solid #333333;
            width: 43%;
            padding-top: 40px;
            box-sizing: border-box;
            float: left;
        }
        
        .contentL .status {
            margin-bottom: 32px;
        }
        
        .contentL .status img {
            float: left;
            margin-right: 18px;
        }
        
        .contentL .status span {
            line-height: 29px;
            font-size: 19px;
            color: #333333;
        }
        
        .contentL .status span a {
            text-decoration: underline;
            color: #0065b4;
        }
        
        .contentL .number {
            width: 163px;
            height: 41px;
            text-align: center;
            color: white;
            background: #002952;
            line-height: 39px;
            display: inline-block;
            cursor: pointer;
        }
        
        .seeopen {
            width: 40px;
            height: 45px;
            display: inline-block;
            position: absolute;
            right: 105px;
            top: 8px;
        }
        
        .contentL .text {
            width: 81%;
            height: 36px;
            border: 3px solid #808080;
        }
        
        .contentL input {
            margin-bottom: 25px;
            text-indent: 6px;
        }
        
        .contentL .retext {
            width: 50%;
            height: 36px;
            border: 3px solid #808080;
        }
        
        .contentL p a {
            text-decoration: underline;
            color: #777777;
        }
        
        #checkboy,
        #checkgirl {
            font-size: 18px;
            width: 15px;
            height: 15px;
            margin-right: 7px;
        }
        
        .contentL i {
            font-style: normal;
            font-size: 12px;
        }
        
        #sel1,
        #sel2,
        #sel3 {
            width: 143px;
            height: 36px;
            border: 3px solid #808080;
        }
        
        #repassword {
            margin-bottom: 13px;
        }
        
        .contentL b {
            display: block;
            color: #333333;
            font-weight: normal;
            text-align: center;
        }
        
        .method {
            text-align: center;
            /* background: orange; */
            margin-top: 28px;
            margin-bottom: 58px;
        }
        
        .method span {
            margin-right: 16px;
        }
        
        .method span:nth-of-type(1) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -393px -74px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .method span:nth-of-type(2) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -392px -137px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .method span:nth-of-type(3) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -392px -195px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .orvip {
            width: 400px;
            height: 300px;
            /* background: chartreuse; */
            margin-left: 34%;
            float: left;
            margin-top: 80px;
        }
        
        .orvip p {
            font-style: normal;
            font-size: 17px;
            /* float: left; */
            line-height: 39px;
        }
        
        .orvip .center {
            width: 160px;
            height: 39px;
            background: #002952;
            text-align: center;
            line-height: 39px;
            color: #fffff4;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 38px;
        }
        
        .contentR {
            float: left;
            width: 57%;
        }
        
        .pandon {
            float: right;
            padding-right: 98px;
            cursor: pointer;
        }
        
        .contentL .typefast {
            width: 407px;
        }
        
        .contentL .getmethod {
            width: 345px;
            height: 52px;
            border-bottom: 1px solid #b0b0b0;
            margin-bottom: 37px;
        }
        
        .contentL .getmethod p {
            float: left;
            font-size: 24px;
            width: 151px;
            height: 50px;
            text-align: center;
            margin-right: 20px;
        }
        
        .contentL .onshow {
            border-bottom: 3px solid #1d6dc4;
            cursor: pointer;
        }
        
        .tablesubmit {
            display: none;
        }
        
        .tablesubmit .submit1,
        .tablesubmit .submit2 {
            margin-top: 43px;
            width: 111px;
            height: 39px;
            background: #002952;
            line-height: 39px;
            text-align: center;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            margin-left: 28%;
            margin-bottom: 65px;
            border-radius: 5px;
        }
        
        .submit2 {
            margin-top: 13px;
        }
        
        #focus {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <div class="content">
        <div class="content-con">
            <div class="contentL">
                <div class="getmethod">
                    <p class="onshow " index=0>密码登录</p>
                    <p index=1>验证码登录</p>
                </div>
                <div class="tablesubmit" id="focus">
                    <p>
                        <input type="text" placeholder="请输入您的用户名*" id="name" class="text">
                    </p>
                    <p style="position: relative;">
                        <input type="password" id="password" placeholder="请输入您的密码*" class="text"><span class="seeopen"><img src="img/eye.png" alt=""></span>
                    </p>
                    <p class="pandon">忘记密码?</p>
                    <button class="submit1">登录</button>
                </div>
                <div class="tablesubmit">
                    <p>
                        <input type="text" placeholder="输入您的手机号码*" id="phonenumber" class="text">
                    </p>
                    <p>
                        <input type="text" placeholder="手机验证码*" class="retext">
                        <span class="number">获取验证码</span>
                    </p>
                    <button class="submit2">登录</button>
                </div>

                <div class="typefast">
                    <b>或通过以下方式快速登录:</b>
                    <div class="method">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="contentR">
                <div class="orvip">
                    <p>还不是斯凯奇会员？</p>
                    <br>
                    <p>立即注册，享无限惊喜。</p>
                    <p>· 第一时间接收新品发布及活动折扣信息</p>
                    <p>· 享受SKECHERS的贴心服务</p>
                    <button class="center">注册</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <div class="btop">
            <div class="top-list">
                <span><i>会员</i></span>
                <span><i>门店</i></span>
            </div>
        </div>
        <div class="middle">
            <div class="copy">
                <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="img/wechatpay_pc.png" alt="" >&nbsp;&nbsp;
                <img src="img/alipay_pc.png" alt="">&nbsp;&nbsp;
                <img src="img/unionpay_pc.png" alt="">&nbsp;&nbsp;
            </span>
            </div>
            <div class="china"><img src="img/cn.png" alt="">&nbsp;&nbsp;中国</div>
        </div>
        <div class="lastmessage">
            <div class="lastL">
                <ul>
                    <b>联系客服</b>
                    <li>团购申请</li>
                    <li>在线客服</li>
                    <li>网站地图</li>
                </ul>
                <ul>
                    <b>我的账户</b>
                    <li>会员权利</li>
                    <li>我的信息</li>
                    <li>我的订单</li>
                    <li>我的积分</li>
                    <li>我的优惠券</li>
                    <li>收件地址</li>
                </ul>
                <ul>
                    <b>帮助中心</b>
                    <li>订单异常</li>
                    <li>发票</li>
                    <li>支付方式</li>
                    <li>退货说明</li>
                    <li>找回密码</li>
                    <li>注册与登录</li>
                </ul>
                <ul>
                    <b>关于斯凯奇</b>
                    <li>斯凯奇故事</li>
                    <li>联系我们</li>
                    <li>免责声明</li>
                    <li>隐私保护</li>
                    <li>服务协议</li>
                    <li>投资关系</li>
                    <li>招贤纳士</li>
                </ul>
            </div>
            <div class="lastR">
                <b>关注我们</b>
                <p class="wechat"><img src="img/weibo.png" alt=""><img src=img/wechat.png " alt=" ">
                    <img src="img/QRCode.jpg " alt=" " class="code " id="template "></p>
                <i>获取斯凯奇最新资讯</i>
                <div class="email "> <input type="email "> <em></em></div>
            </div>
        </div>
    </div>
    <div class="footer ">
        <div class="footer-con ">
            <div class="footL ">
                <p>广州市利德丹贸易有限公司保留所有权利</p>
                <p><span style="color:#002b57 ">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
            </div>
            <div class="footR ">
                <img src="img/pc_kx.png " alt=" ">
                <img src="img/pc_cx.png " alt=" ">
                <img src="img/pc_ga.png " alt=" ">
                <img src="img/pc_zzN.png " alt=" ">
            </div>
            <!-- <div class="gotop "><img src="../img/btn-gotop.png " alt=" "></div> -->
        </div>

    </div>
    <script src="lib/jquery.min.js "></script>
    <script src="lib/common.js "></script>
    <script>
       
         $("#name ")[0].value=sessionStorage.getItem("name ")
      $("#password ").val(sessionStorage.getItem("password "))
     $("#phonenumber ").val(sessionStorage.getItem("phonenumber "))
            let getmethod = document.querySelectorAll(".getmethod p ")
            let contentlist=$(".tablesubmit ")
        for (let i = 0; i < getmethod.length; i++) {
            // getmethod[i].setAttribute("numbers ",i)
            getmethod[i].onclick = function() {
                for (let j = 0; j < getmethod.length; j++) {
                    getmethod[j].className = " "
                }
                this.className = "onshow "
                let n = $(this).index()
             
                for (let k = 0; k < contentlist.length; k++) {
                    // console.log(k)
                    contentlist[k].style.display = "none "
                }
                contentlist[n].style.display= "block "
          }
         }
       
        $(".center ").click(function() {
            location.href = `${address}/register.html`
        })
      
             //登录注册链接地址

             $(".gocenter ").click(function() {
            location.href = `${address}/login.html`
        })
        $(".trycenter ").click(function() {
            location.href = `${address}/register.html`
        })
            //登录
        $(".submit1 ").click(function(){
            if($("#name ").val()&&($("#password ").val())){
                $.ajax({
                    url:`${address}/searchuser1`,
                    data:{
                      name:  $("#name ").val(),
                      password:$("#password ").val()
                    },
                    success(data){
                      let josndata=JSON.parse(data)
                       
                      
                        if(data==2 ){
                            alert("用户名或密码错误 ")
                        }else{
                           sessionStorage.setItem("userid ",josndata[0].id)
                            sessionStorage.setItem("name ",josndata[0].username)
                            sessionStorage.setItem("password ",josndata[0].password)
                              location.href = `${address}/cartlist.html`
                        }
                    }
                })
            }else{
                alert("请补全信息 ")
            }
        })

       
        let passnumber = document.getElementsByClassName("retext ")[0]
       
        
            
        
    $(".number ").click(function(){
        if($("#phonenumber ").val()){
            $.ajax({
                    url:`${address}/searchuser2`,
                    data:{
                      phonenumber:  $("#phonenumber ").val(),
                      passnumber:$('.retext').val()
                    },
                    success(data){
                       console.log(data)
                            $(".retext ").val((data[0].passnumber))
                       sessionStorage.setItem("phonenumber ",data[0].phonenumber)
                      var oneword=$(".retext ").val(data[0].passnumber)
                      console.log(oneword.val())
                      var twoword=$("#phonenumber ").val(data[0].phonenumber)
                      console.log(twoword)
                      $(".submit2 ").click(function(){
                       if(oneword.val()&&twoword.val()){
                        location.href=`${address}/cartlist.html`
                      }
           
         })        
                       }
                })
            }else{
                alert("请补全信息 ")
            }
    })


        
    </script>
</body>

</html>